<template>
  <a-menu :selected-keys="selectedKeys" theme="dark" mode="horizontal" style="height: 100%">
    <template v-for="item in menusNav" :key="item.name">
      <a-menu-item v-if="item && !item.hidden" :key="item.name" style="height: 100%;line-height: 64px;" @click="toMenu(item)">
        <i v-if="item.meta" class="iconfont" :class="'icon-' + item.meta.icon" />
        <span v-if="item.meta">&nbsp;{{ item.meta.title }}</span>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: 'CNav',
  props: {
    menus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedKeys: ['01']
    }
  },
  computed: {
    menusNav: function() {
      return this.menus
    }
  },
  created() {
    if (this.menusNav && this.menusNav.length > 0) {
      this.$bus.$emit('do-switch-menus', this.menusNav[0])
    }
  },
  methods: {
    toMenu(item) {
      console.log(item)
      this.$bus.$emit('do-switch-menus', item)
    }
  }
}
</script>

<style scoped>
    .menu-scroll {
        height: 60px;
        overflow: hidden;
        white-space: nowrap;
    }

    .menu-scroll .menu-scroll-item {
        height: 60px;
    }
</style>
